<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LangGraph4j 工作流 SSE 演示</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .input-section {
            margin-bottom: 30px;
        }
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #555;
        }
        input[type="text"] {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
        }
        .button-group {
            margin: 20px 0;
            text-align: center;
        }
        button {
            padding: 12px 24px;
            margin: 0 10px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn-primary {
            background-color: #007bff;
            color: white;
        }
        .btn-primary:hover {
            background-color: #0056b3;
        }
        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }
        .btn-secondary:hover {
            background-color: #545b62;
        }
        .btn-success {
            background-color: #28a745;
            color: white;
        }
        .btn-success:hover {
            background-color: #1e7e34;
        }
        .output-section {
            margin-top: 30px;
        }
        .status {
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
            font-weight: bold;
        }
        .status.connected {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.disconnected {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .status.connecting {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        .events {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 20px;
            max-height: 500px;
            overflow-y: auto;
        }
        .event {
            margin-bottom: 15px;
            padding: 10px;
            border-left: 4px solid #007bff;
            background-color: white;
            border-radius: 3px;
        }
        .event-type {
            font-weight: bold;
            color: #007bff;
            margin-bottom: 5px;
        }
        .event-data {
            font-family: 'Courier New', monospace;
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 3px;
            white-space: pre-wrap;
        }
        .timestamp {
            font-size: 12px;
            color: #6c757d;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>🚀 LangGraph4j 工作流 SSE 演示</h1>

    <div class="input-section">
        <label for="promptInput">输入提示词：</label>
        <input type="text" id="promptInput" placeholder="例如：创建一个博客网站，包含文章列表和详情页面"
               value="创建一个在线教育平台，包含课程展示和学习进度跟踪功能">
    </div>

    <div class="button-group">
        <button class="btn-primary" onclick="startWorkflowFlux()">🔄 开始 Flux 工作流</button>
        <button class="btn-secondary" onclick="clearEvents()">🗑️ 清空日志</button>
    </div>

    <div class="output-section">
        <div id="status" class="status disconnected">状态: 未连接</div>
        <div class="events" id="events">
            <div class="event">
                <div class="event-type">系统消息</div>
                <div class="event-data">等待连接...</div>
                <div class="timestamp">准备就绪</div>
            </div>
        </div>
    </div>
</div>

<script>
    let eventSource = null;

    function updateStatus(message, className) {
        const status = document.getElementById('status');
        status.textContent = '状态: ' + message;
        status.className = 'status ' + className;
    }

    function addEvent(type, data, timestamp) {
        const events = document.getElementById('events');
        const event = document.createElement('div');
        event.className = 'event';

        const eventType = document.createElement('div');
        eventType.className = 'event-type';
        eventType.textContent = type;

        const eventData = document.createElement('div');
        eventData.className = 'event-data';
        eventData.textContent = typeof data === 'object' ? JSON.stringify(data, null, 2) : data;

        const eventTime = document.createElement('div');
        eventTime.className = 'timestamp';
        eventTime.textContent = timestamp || new Date().toLocaleTimeString();

        event.appendChild(eventType);
        event.appendChild(eventData);
        event.appendChild(eventTime);

        events.appendChild(event);
        events.scrollTop = events.scrollHeight;
    }

    function startWorkflowFlux() {
        const prompt = document.getElementById('promptInput').value.trim();
        if (!prompt) {
            alert('请输入提示词');
            return;
        }

        if (eventSource) {
            eventSource.close();
        }

        updateStatus('工作流执行中...', 'connecting');
        addEvent('系统消息', '开始执行工作流: ' + prompt, new Date().toLocaleTimeString());

        const url = `http://localhost:8123/api/workflow/execute-flux?prompt=${encodeURIComponent(prompt)}`;
        eventSource = new EventSource(url);

        eventSource.onopen = function() {
            updateStatus('工作流连接已建立', 'connected');
            addEvent('连接事件', '工作流 Flux 连接成功建立', new Date().toLocaleTimeString());
            console.log('EventSource 连接已建立');
        };

        // 通用消息监听器，捕获所有事件
        eventSource.onmessage = function(event) {
            console.log('收到通用消息:', event);
            try {
                const data = JSON.parse(event.data);
                addEvent('📨 通用消息', data, new Date().toLocaleTimeString());
            } catch (e) {
                addEvent('📨 通用消息', event.data, new Date().toLocaleTimeString());
            }
        };

        eventSource.addEventListener('workflow_start', function(event) {
            console.log('收到 workflow_start 事件:', event.data);
            const data = JSON.parse(event.data);
            addEvent('🚀 工作流开始', data, new Date().toLocaleTimeString());
        });

        eventSource.addEventListener('step_completed', function(event) {
            console.log('收到 step_completed 事件:', event.data);
            const data = JSON.parse(event.data);
            addEvent(`✅ 步骤 ${data.stepNumber} 完成: ${data.currentStep}`, data, new Date().toLocaleTimeString());
        });

        eventSource.addEventListener('workflow_completed', function(event) {
            const data = JSON.parse(event.data);
            addEvent('🎉 工作流完成', data, new Date().toLocaleTimeString());
            setTimeout(() => {
                eventSource.close();
                updateStatus('工作流完成，连接已关闭', 'disconnected');
            }, 1000);
        });

        eventSource.addEventListener('workflow_error', function(event) {
            const data = JSON.parse(event.data);
            addEvent('❌ 工作流错误', data, new Date().toLocaleTimeString());
            setTimeout(() => {
                eventSource.close();
                updateStatus('工作流失败，连接已关闭', 'disconnected');
            }, 1000);
        });

        eventSource.onerror = function(event) {
            console.error('EventSource 错误:', event);
            updateStatus('连接错误', 'disconnected');
            addEvent('错误事件', '工作流连接发生错误', new Date().toLocaleTimeString());
            eventSource.close();
        };
    }

    function clearEvents() {
        const events = document.getElementById('events');
        events.innerHTML = '<div class="event"><div class="event-type">系统消息</div><div class="event-data">日志已清空</div><div class="timestamp">' + new Date().toLocaleTimeString() + '</div></div>';
    }

    // 页面卸载时关闭连接
    window.addEventListener('beforeunload', function() {
        if (eventSource) {
            eventSource.close();
        }
    });
</script>
</body>
</html>